<template>
  <!-- 精选题库的表格区域 -->
  <div>
    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="" label="题型" width="120">
        <template slot-scope="scope">
          <el-row v-if="tableData[scope.$index].questionType === '1'"
            >单选</el-row
          >
          <el-row v-if="tableData[scope.$index].questionType === '2'"
            >多选</el-row
          >
          <el-row v-if="tableData[scope.$index].questionType === '3'"
            >简答</el-row
          >
        </template>
      </el-table-column>
      <el-table-column prop="" label="题干" width="280">
        <template slot-scope="scope">
          {{ tableData[scope.$index].question }}
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="180"
      ></el-table-column>
      <el-table-column prop="" label="难度" width="80">
        <template slot-scope="scope">
          <el-row v-if="tableData[scope.$index].difficulty === '1'"
            >简单</el-row
          >
          <el-row v-if="tableData[scope.$index].difficulty === '2'"
            >一般</el-row
          >
          <el-row v-if="tableData[scope.$index].difficulty === '3'"
            >困难</el-row
          >
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="" label="审核状态" width="120">
        <template slot-scope="scope">
          <el-row v-if="tableData[scope.$index].chkState === 0">待审核</el-row>
          <el-row v-else-if="tableData[scope.$index].chkState === 1"
            >已审核</el-row
          >
          <el-row v-else-if="tableData[scope.$index].chkState === 2"
            >已拒绝</el-row
          >
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="" label="发布状态" width="150">
        <template slot-scope="scope">
          <el-row
            v-if="
              tableData[scope.$index].publishState === 1 &&
              tableData[scope.$index].chkState === 1
            "
            >已发布</el-row
          >
          <el-row
            v-else-if="
              tableData[scope.$index].publishState === 0 &&
              tableData[scope.$index].chkState === 1
            "
            >已下架</el-row
          >
          <el-row v-else>待发布</el-row>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        prop="date"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-row type="flex" justify="space-around">
            <el-button
              type="text"
              size="mini"
              @click="onPreview(tableData[scope.$index].id)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="onExamine(tableData[scope.$index].id)"
              :disabled="tableData[scope.$index].chkState !== 0"
              >审核</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="tableData[scope.$index].publishState === 1"
              @click="onmodify(tableData[scope.$index].id)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="mini"
              v-if="tableData[scope.$index].publishState === 1"
              @click="
                onShelves(
                  tableData[scope.$index].id,
                  tableData[scope.$index].publishState
                )
              "
              >下架</el-button
            >
            <el-button
              type="text"
              size="mini"
              v-else
              @click="
                onShelves(
                  tableData[scope.$index].id,
                  tableData[scope.$index].publishState
                )
              "
              >上架</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="tableData[scope.$index].publishState === 1"
              @click="deleteTest(tableData[scope.$index].id)"
              >删除</el-button
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 审核对话框区域 -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogFormVisible"
      width="400px"
      hight="299px"
      top="108px"
      @close="close"
    >
      <el-form :model="form">
        <el-form-item>
          <el-radio-group v-model="form.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="form.chkRemarks"
            type="textarea"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForReview" :loading="loading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 预览框区域 -->
    <questionsPreview
      ref="preview"
      :currentData="currentData"
    ></questionsPreview>
  </div>
</template>

<script>
import {
  getSujectList,
  examine,
  upperAndLowerShelves,
  deleteTestQuestions
} from '@/api/hmmm/choice'
import { html2Text } from '@/utils/index.js'
import questionsPreview from '@/module-hmmm/components/choice/preview.vue'
export default {
  name: 'tablePage',
  data () {
    return {
      dialogFormVisible: false, // 控制审核对话框的显示隐藏
      form: {
        // 审核对话框里面的表单绑定的数据
        chkState: 1, // 审核状态，1  通过，2  不通过
        chkRemarks: '', // 原因
        id: '' // 学科的id
      },
      loading: false, // 按钮加载状态
      shelvesData: {
        // 保存上下架的数据
        id: '', // 学科id
        publishState: '' // 上下架的状态
      },
      deleteData: {
        // 保存要删除的数据
        id: '' // 学科id
      },
      dialogForm: false, // 控制预览框的显示隐藏
      currentData: {} // 当前项的列表数据
    }
  },
  created () {},
  mounted () {},
  components: { questionsPreview },
  props: {
    tableData: {
      // 表格数据
      type: Array,
      required: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 点击审核按钮触发
    onExamine (id) {
      this.dialogFormVisible = true
      this.form.id = id
    },
    // 点击确认按钮触发
    async submitForReview () {
      try {
        if (this.form.chkRemarks) {
          // 打开loading
          this.loading = true
          // 调用接口操作数据
          await examine(this.form)
          // 关闭loading
          this.loading = false
          // 关闭对话框
          this.dialogFormVisible = false
          // 提示操作成功并更新数据
          this.$emit('getAllsubjectList')
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          // 如果审核意见没有填就弹出警告信息
          this.$message({
            message: '请输入审核意见',
            type: 'warning'
          })
        }
      } catch (err) {
        this.$message(err)
      }
    },
    // 关闭对话框触发
    close () {
      this.form = {
        chkState: 1, // 审核状态，1  通过，2  不通过
        chkRemarks: '', // 原因
        id: '' // 学科的id
      }
    },
    // 点击上下架触发
    onShelves (id, publishState) {
      if (publishState === 1) {
        this.shelvesData.publishState = 0
      } else {
        this.shelvesData.publishState = 1
      }
      this.shelvesData.id = id
      const text = publishState === 1 ? '下架' : '上架'
      this.$confirm(`您确认${text}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定触发
        try {
          // 发送请求
          await upperAndLowerShelves(this.shelvesData)
          this.$emit('getAllsubjectList')
          this.$message({
            type: 'success',
            message: `${text}成功!`
          })
        } catch (err) {
          this.$message(err)
        }
      })
    },
    // 点击删除触发
    deleteTest (id) {
      this.deleteData.id = id
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteTestQuestions(this.deleteData)
          // 更新数据
          this.$emit('getAllsubjectList')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (err) {
          this.$message(err)
        }
      })
    },
    // 点击预览触发
    async onPreview (id) {
      try {
        this.$refs.preview.onOpen()
        // 把当前点击的列表数据赋值给currentData 方便对话框使用
        const result = await getSujectList({ id })
        // html标签转文字
        result.data.answer = html2Text(result.data.answer)
        result.data.question = html2Text(result.data.question)
        this.currentData = result.data
      } catch (err) {
        this.$message(err)
      }
    },
    // 点击修改时触发
    async onmodify (id) {
      // 把当前点击项传给试题录入组件
      try {
        const result = await getSujectList({ id })
        // html标签转文字
        result.data.answer = html2Text(result.data.answer)
        result.data.question = html2Text(result.data.question)
        const currentData = result.data
        this.$router.push({
          path: '/questions/new',
          query: { currentData }
        })
      } catch (err) {
        this.$message(err)
      }
    },
    onclose () {
      this.dialogForm = false
    }
  }
}
</script>

<style scoped>
</style>
